// 我们要实现点击按钮就可以上下页图片
// 获取按钮和图片的对象
const img = document.querySelector("img")
console.log(img);
const btnPrev = document.getElementById("prev")

const btnNext = document.getElementById("next")
const info = document.getElementsByClassName("info")[0]
console.log(info);
console.log(btnNext);
console.log(btnPrev);
// 把全部要用到的图片存到一个数组中,好用来处理上下页图片.
let arrImg = [
    "/JavaScript/10.DOM/images/1.png"
    ,"/JavaScript/10.DOM/images/2.png"
    ,"/JavaScript/10.DOM/images/3.png"
    ,"/JavaScript/10.DOM/images/4.png"
    ,"/JavaScript/10.DOM/images/5.png"
]

console.log(arrImg[0]);
// 开始操作按钮,
let i = 0
info.textContent = `总共有 ${arrImg.length} 张图片,现在是第 ${i+1} 张图片`

btnPrev.addEventListener("click", function () {
    i--
    // 检查是否合法,不合法就直接到最后一张图片,另一个按钮反之
    if (i < 0) {
        i = arrImg.length - 1
    }
    img.src = arrImg[i]
    info.textContent = `总共有 ${arrImg.length} 张图片,现在是第 ${i+1} 张图片`
})
btnNext.addEventListener("click", function () {
    i++
    if (i > arrImg.length - 1) {
        i = 0
    }
    img.src = arrImg[i]
    info.textContent = `总共有 ${arrImg.length} 张图片,现在是第 ${i+1} 张图片`
})
// 现在解决由于i++到5时,为Undefined导致的找不到图片问题
// 并向inof文本节点上输出现在有几张,是第几张